<template>
	<el-dialog v-model="props.isShow" width="28%" @close="handleClose" class="transaction-spot-dialog-dark">
		<template #title>
			<p class="text-18px font-bold text-#ffffff">
				调整杠杆
			</p>
		</template>
		<template #default>
			<div class="w-full">
				<div class="mt-10px w-full">
					<div class="flex items-center">
						<p class="text-12px text-#86909C">
							杠杆
						</p>
					</div>
					<div class="mt-10px">
						<el-input-number :precision="2" :step="0.01" :min="0" class="input-spot-pop-form " />
					</div>
					<div class="w-100% mt-20px">
						<el-steps style="width: 100%;" :active="2" class="spot-from-pop-steps">
							<el-step title="0x" />
							<el-step title="25x" />
							<el-step title="50x" />
							<el-step title="75x" />
							<el-step title="100x" />
							<el-step title="125x" />
						</el-steps>
					</div>
					<div class="mt-30px text-12px text-#86909C">
						当前杠杆倍数最高可开：23000.00USDT
					</div>
					<div class="mt-20px text-12px text-#86909C">
						杠杆调整将同时影响当前仓位和挂单的杠杆
					</div>
					<div class="mt-20px text-12px text-#F34E5F">
						选择超过 [10X]杠杆交易会增加强行平仓风险，请注意相关风险
					</div>
				</div>
				<div class="mt-40px">
					<el-button color="#114CEE" style="width: 100%;height:50px;color:#fff;font-size:18px;">确认</el-button>
				</div>
			</div>
		</template>

	</el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
interface IProps {
	isShow: boolean;
}

const props = defineProps<IProps>();
const emit = defineEmits(['close'])

const selectedMode = ref<any>('全仓');

const handleClose = () => {
	emit('close', false);
}
</script>
<style scoped lang="scss">
::v-deep .el-input__wrapper {
	background-color: #272727;
	border: none;
	box-shadow: none;
}
</style>
<style lang="scss">
.transaction-spot-dialog-dark {
	background: #2B2B2B;
}

.input-spot-pop-form {
	width: 100%;
	height: 50px;
	background: #202020;

	.el-input {
		--el-input-border-color: #202020;
		--el-input-focus-border: #202020;
		--el-input-hover-border: #202020;
		--el-input-focus-border-color: #202020;
		--el-input-hover-border-color: #202020;
	}

	.el-input-number__decrease,
	.el-input-number__increase {
		border: none;
		width: 26%;
		background: #202020;
	}

	.el-icon {
		font-size: 16px;
		color: #7E7F84;
	}

	.el-input__wrapper {
		background: #202020;
	}

	.el-input__inner {
		font-size: 16px;
	}
}

.spot-from-pop-steps {

	.el-step__title,
	.is-finish {
		color: #86909C;
		font-size: 12px;
	}

	.el-step__icon-inner {
		display: none;
	}

	.el-step__icon,
	.is-text {
		background-color: #202020;
	}

	.el-step__icon {
		border-color: #707070;
	}

	.is-finish {
		.el-step__icon {

			border-color: #fff;
		}
	}

	.el-step__line-inner {
		height: 4px !important;
		background-color: #ffffff !important;
		border: none;
	}

	.el-step__line {
		height: 4px !important;
		background-color: #272727;
	}
}
</style>
